@import (reference) './variable.less';

@selectorPrefix: ant-selector;

.@{selectorPrefix} {
  position: relative;
  display: flex;
  flex-direction: column;
  // padding: calc(@selector-collapse / 2);
  background-color: @selector-background-color;
  line-height: @selector-line-height;

  &-disabled .ant-selector-content {
    opacity: 0.6;

    .@{selectorPrefix}-item-disabled {
      opacity: 1;
    }
  }

  &-content {
    display: flex;
    flex: 0 33.3333%;
    padding: calc(@selector-collapse / 2);
    box-sizing: border-box;

    &-item2 {
      flex: 1;
    }

    &-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .ant-tap-modal-mask {
      width: calc(100% - 24 * @rpx);
      height: calc(100% - 24 * @rpx);
      margin: 12 * @rpx 0 0 12 * @rpx;
    }
  }

  &-item {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    padding: calc(@selector-collapse / 2) calc(@selector-collapse / 4);
    text-align: center;
    background-color: @selector-item-background;
    border-radius: @corner-radius-md;

    &-active {
      background-color: @selector-item-active-background;

      .@{selectorPrefix}-item-text {
        color: @selector-item-color;
      }
    }

    &-disabled {
      opacity: 0.6;
    }

    &-text {
      font-size: @selector-item-size;
      color: @selector-item-color;
    }

    &-subtext {
      font-size: @selector-item-sub-size;
      color: @selector-item-sub-color;
    }

    &-badge-active {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('')
        right bottom no-repeat;
      background-size: 19px 15px;
    }
  }
}
